<%--
  Created by IntelliJ IDEA.
  User: JAVA
  Date: 2019/12/10
  Time: 19:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<jsp:include page="../inc.jsp"/>
<html>
<head>
    <title>学生信息主页</title>
    <script type="text/javascript">
        var list = "";
        $(function () {
            getData();
            showPages();
            //监听弹出页面的隐藏
            $("#myModal").on('hidden.bs.modal',function () {
                var f = $('#myFrame').contents().find('#dataForm');//获取form表单
                $(f).find('input').val('').removeAttr('checked');
            });
        });
        function getData() {

            $.ajax({
               type:'GET',
               url:'${ctx}/sc/find',
               async:false,
               dataType:'json',
               success:function (r) {
                   list = r;
               }
            });

        }

        function doPages(page){
            var count = 10;
            var start = (page-1)*count;
            var end  = start + count;
            for(var i=start;i<end;i++){
                var stu = list[i];
                var bir = stu.bir;
                var str = '<tr id="t'+stu.id+'">' +
                    ' <td><input type="checkbox"></td>' +
                    ' <td>'+stu.name+'</td>' +
                    ' <td>'+stu.sex+'</td>' +
                    ' <td>'+bir+'</td>' +
                    ' <td>'+stu.studentNo+'</td>' +
                    ' <td>'+stu.height+'</td>' +
                    ' <td align="center">' +
                    '  <a href="#" class="btn btn-success" onclick="editData('+stu.id+')">编辑</a>' +
                    '  <a href="#" class="btn btn-danger" onclick="removeData('+stu.id+')">删除</a>' +
                    ' </td>' +
                    '</tr>';
                $('#tbody').append(str);
            }
        }

        function showPages() {
            $('#pages').twbsPagination({
                totalPages:10,
                visiblePages:5,
                first:'首页',
                last:'尾页',
                prev:'上一页',
                next:'下一页',
                onPageClick: function (event,page) {
                    $('#tbody').empty();
                    doPages(page);
                }
            });
        }

        function addData() {
            $("#myModal").modal('show');
        }
        function saveData() {
            var f = $('#myFrame').contents().find('#dataForm');//获取form表单
            var id = $(f).find('input[name="id"]').val();
            var url = '${ctx}/sc/add';
            if(id!=undefined&&id!=null){
                url = '${ctx}/sc/edit';
            }
            var data = f.serialize();
            $.ajax({
               type:'POST',
               url:url,
               data:data,
               dataType:'json',
               success:function (r) {
                   alert(r.msg);
                   if(r.is){
                       $('#myModal').hide();
                       $('.modal-backdrop').remove();//删除遮罩层
                       $('#tbody').empty();
                       getData();
                       doPages(1);
                   }
               }
            });
        }
        function removeData(id) {
            //确认框
            var flat = confirm("是否确定删除该条记录？");
            if(flat){
                $.ajax({
                    type:'GET',
                    url:'${ctx}/sc/remove/'+id,
                    dataType:'json',
                    success:function (r) {
                        alert(r.msg);
                        if(r.is){
                            $('#t'+id).remove();
                        }
                    }
                });
            }
        }
        function editData(id) {
            $('#myFrame').attr("src","${ctx}/sc/aoe?id="+id);
            $("#myModal").modal('show');
        }
    </script>
</head>
<body>
    <div class="container" style="margin-top: 10px;margin-bottom: 15px">
        <div class="alert alert-success">
            <a class="close" href="#" data-dismiss="alert">&times;</a>
            <strong>这里显示学生的所有信息</strong>
        </div>
        <div>
            <a href="#" class="btn btn-info" onclick="addData()">新增</a>
        </div>
        <div>
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th><input type="checkbox"></th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>出生日期</th>
                        <th>学号</th>
                        <th>身高</th>
                        <th align="center">&nbsp;</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
            <ul id="pages" class="pagination-sm" style="margin-top: -30px"></ul>
        </div>
    </div>

    <div class="modal" id="myModal" tabindex="-1" style="height: auto"
         aria-labelledby="myModalTitle" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="myModalTitle">新增学生信息</h4>
                </div>
                <div class="modal-body">
                    <iframe id="myFrame" src="${ctx}/sc/aoe" style="width: 100%;height: auto;min-height: 400px" frameborder="0" scrolling="auto">
                    </iframe>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" onclick="saveData()">保存</button>
                    <button class="btn btn-warning" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
